import { useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { Avatar, List, Button } from 'antd';
import { UserFriendVo } from '@/modules/friend';
import { User } from '@/modules/login';

export default function FiandListComponnts(props: { fiandList: any }) {
  const user = JSON.parse(window.localStorage.getItem('user')!) as User
  useEffect(() => {

    console.log(props.fiandList);
    setfiandList(props.fiandList)
  }, [props.fiandList])

  const [fiandList, setfiandList] = useState<Array<UserFriendVo>>([]);
  const navigate = useNavigate()
  const loadMoreData = () => {
    console.log(props.fiandList);
  };



  useEffect(() => {
    loadMoreData();
  }, []);

  const to = (fiand: UserFriendVo) => {

    console.log(fiand);

    navigate(`/home/${user.id}/chat/${fiand.id}`, { state: { fiand } })
  }
  return (
    <div
    >
      {/* <InfiniteScroll
        dataLength={fiandList.length}
        next={loadMoreData}
        hasMore={fiandList.length < 50}
        loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
        endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
        scrollableTarget="scrollableDiv"
      > */}
      <List
        id="scrollableDiv"
        style={{
          height: 625,
          overflow: 'auto',
          padding: '0 16px',
          border: '1px solid rgba(140, 140, 140, 0.35)',
        }}
        dataSource={fiandList}
        renderItem={(item) => (
          <List.Item key={item.friendName}>
            <List.Item.Meta
              avatar={<Avatar size='large' src={item.headImg} />}
              title={<a href="https://ant.design">{item.friendName}</a>}
              description={item.introduce}
            />
            <div>
              <Button onClick={() => { to(item) }}>找我聊天</Button>
            </div>
          </List.Item>
        )}
      />
      {/* </InfiniteScroll> */}
    </div>
  )
}
